.vertical-menu {
  background-color: var(--inbiz-color-menu-left-bg);
  border-right: 1px solid #eee;
  // transition: all 0.2s;
  transition: width 0.2s cubic-bezier(0.09, 1.11, 0.36, 0.95);

  .logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 60px;

    .default-logo {
      width: 120px;
      height: 60px;
    }

    .upload-logo {
      width: 180px;
      height: 60px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .small-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;

    .upload-logo {
      width: 16px;
      height: 44px;
    }
  }

  &-content {
    height: 100%;

    .scrollbarHover {
      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background-color: transparent;
        transition: background-color 0.25s ease-in-out;
      }

      &::-webkit-scrollbar-thumb {
        background-color: transparent;
      }

      &:hover {
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: #ddd;
          border-radius: 4px;
        }

        /* 定义滚动条轨道内阴影+圆角 */
        &::-webkit-scrollbar-track {
          background-color: #f5f5f5;
          border-radius: 4px;

          --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }

        /* 定义滑块内阴影+圆角 */
        &::-webkit-scrollbar-thumb {
          background-color: #ddd;
          border-radius: 4px;

          --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
      }
    }
  }

  &-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
  }

  &-bottom-inlineCollapsed {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;

    .VerticalMenu\.PluginContainer {
      width: 100%;
      height: 60px;
      overflow: auto;
    }
  }

  .inlineCollapsed-icon {
    padding-right: 5px;
    padding-left: 5px;
    color: #bbb;
    font-size: 16px;

    &:hover {
      color: var(--inbiz-color-primary);
      cursor: pointer;
    }
  }
}

.edocMenuColumn {
  display: flex;
  flex-direction: column;
  width: inherit;

  .ant-collapse-header {
    width: 100%;
    padding: 0 0 0 0 !important;
    padding-left: 10px;

    .ant-collapse-header-text {
      width: 100%;
    }

    .edocMenu-collMenuHeader {
      height: 44px;
      font-size: var(--inbiz-font-size-menu-left);
    }
  }

  .ant-collapse-content-box {
    padding: 0 !important;
  }

  .edocMenu-normalItem,
  .edocMenu-popoverItem {
    align-items: center;
    justify-content: center;
    height: 40px;
    padding-right: 16px;
    padding-left: 16px;
    color: var(--inbiz-color-menu-left-default);

    p {
      width: 100%;
      font-size: var(--inbiz-font-size-menu-left);
    }

    &:hover {
      color: var(--inbiz-color-menu-left-selected);
      background-color: var(--inbiz-color-menu-left-bg-hover);

      .edocMenu-normalItem-expan {
        color: var(--inbiz-color-menu-left-selected);
      }
    }

    .edocMenu-normalItem-expan {
      color: var(--inbiz-color-menu-left-default);
    }
  }

  .edocMenu-popoverItem {
    padding-right: 16px;
    padding-right: 0;
  }

  .edocMenu-collMenuHeader {
    align-items: center;
    width: 100%;
    background-color: var(--inbiz-color-menu-left-bg);

    .edocMenu-collMenuHeader-tr {
      font-size: var(--inbiz-font-size-menu-left);
    }

    &:hover {
      color: var(--inbiz-color-menu-left-selected);
      background-color: var(--inbiz-color-menu-left-bg-hover);

      .edocMenu-normalItem-expan {

        color: var(--inbiz-color-menu-left-selected);
      }
    }

    .ant-collapse-header {
      width: 100%;

      .ant-collapse-header-text {
        width: 100%;
        font-size: var(--inbiz-font-size-menu-left);
      }
    }
  }

  .dev {
    color: var(--inbiz-color-menu-left-selected) !important;
    background-color: var(--inbiz-color-menu-left-bg-selected);

    svg {
      color: var(--inbiz-color-menu-left-selected);
    }
  }

  .header-dev {
    color: var(--inbiz-color-primary);
    background-color: var(--inbiz-color-menu-left-bg-selected) !important;

    svg {
      color: var(--inbiz-color-menu-left-selected);
    }
  }

  .MenuQuickCollapse-content {
    background-color: var(--inbiz-color-menu-left-child-bg);

    .ant-collapse-header {
      .edocMenu-collMenuHeader {
        font-size: var(--inbiz-font-size-menu-child-left);
      }
    }

    .edocMenu-normalItem,
    .edocMenu-popoverItem {
      color: var(--inbiz-color-menu-left-child-default);

      p {
        font-size: var(--inbiz-font-size-menu-child-left);
      }

      &:hover {
        color: var(--inbiz-color-menu-left-child-selected);
        background-color: var(--inbiz-color-menu-left-bg-child-hover);

        .edocMenu-normalItem-expan {
          color: var(--inbiz-color-menu-left-child-selected);
        }
      }

      .edocMenu-normalItem-expan {
        color: var(--inbiz-color-menu-left-child-default);
      }
    }

    .edocMenu-collMenuHeader {
      background-color: var(--inbiz-color-menu-left-child-bg);

      .edocMenu-collMenuHeader-tr {
        font-size: var(--inbiz-font-size-menu-child-left);
      }

      &:hover {
        color: var(--inbiz-color-menu-left-child-selected);
        background-color: var(--inbiz-color-menu-left-bg-child-hover);

        .edocMenu-normalItem-expan {
          color: var(--inbiz-color-menu-left-child-selected);
        }
      }

      .ant-collapse-header {
        .ant-collapse-header-text {
          font-size: var(--inbiz-font-size-menu-child-left);
        }
      }
    }

    .dev {
      color: var(--inbiz-color-menu-left-child-selected) !important;
      background-color: var(--inbiz-color-menu-left-bg-child-selected);

      svg {
        color: var(--inbiz-color-menu-left-child-selected);
      }
    }

    .header-dev {
      color: var(--inbiz-color-primary);
      background-color: var(--inbiz-color-menu-left-bg-child-selected) !important;

      svg {
        color: var(--inbiz-color-menu-left-child-selected);
      }
    }
  }
}